<script setup lang="ts">
import { computed, ref } from 'vue';
import CustomPassword from './components/password.vue'
import  CustomMobile from  './components/mobile.vue'
const tabMetas=[
  {title:'密码登录',subTitle:'验证码'},
  {title:'验证码登录',subTitle:'密码'}
]
const activeIndex=ref(0)
const activeMeta=computed(()=>{
  return tabMetas[activeIndex.value]
})
const handleChangeLoginType= ()=>{
// activeIndex.value = activeIndex.value === 0 ? 1 : 0
activeIndex.value = Math.abs(activeIndex.value - 1)//绝对值
}
</script>
<template>
  <view class="user-login">
    <view class="login-type" >
      <view class="title">{{activeMeta.title}}</view>
      <view class="type" @tap="handleChangeLoginType">
        <text>{{activeMeta.subTitle}}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <!-- 用户名&密码方式 -->
    <CustomPassword v-if="activeIndex===0" />
     <!-- 短信验证码方式 -->
    <CustomMobile v-else />
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>
<style lang="scss">
@import './login.scss'
</style>